<template>
  <div id="app" class="wrapper">
    	<header>
    		<img src="./img/logo.png" alt="" class="header-logo">
    		<div class="search-bar">
    			<full-search></full-search>
    		</div>
    		<div class="menu-bar">
    			<router-link to="/index"><icon name="home" scale="2"></icon></router-link>
    		</div>
    	</header>
    	<div class="el-row container">
    		<div class="menu el-col el-col-4" style="background-color: rgb(238, 246, 245);">
    			<el-menu default-active="2" router @open="handleOpen" @close="handleClose">
		      <el-submenu index="1">
		        <template slot="title"><i class="el-icon-menu"></i>图表示例</template>
		        <el-menu-item-group>
		          <template slot="title">柱状图</template>
		          <el-menu-item index="/chartdemo1">图1</el-menu-item>
		          <el-menu-item index="1-2">图2</el-menu-item>
		        </el-menu-item-group>
		        <el-menu-item-group title="线图">
		          <el-menu-item index="1-3">图1</el-menu-item>
		        </el-menu-item-group>
		      </el-submenu>
		      <el-submenu index="2">
		      	<template slot="title"><i class="el-icon-menu"></i>表格示例</template>
		        <el-menu-item index="/tabledemo">静态表格</el-menu-item>
		        <el-menu-item index="/tabledemo2">服务端动态数据表格</el-menu-item>
		      </el-submenu>
		      <el-submenu index="3">
		      	<template slot="title"><i class="el-icon-menu"></i>地图示例</template>
		        <el-menu-item index="/leafletmap">Leaflet地图</el-menu-item>
		        <el-menu-item index="/mapboxmap">MapBox地图</el-menu-item>
		      </el-submenu>
		      <el-submenu index="4">
		      	<template slot="title"><i class="el-icon-menu"></i>文档示例</template>
		        <el-menu-item index="/readpdf">PDF</el-menu-item>
		      </el-submenu>
		    </el-menu>
    		</div>
    		<div class="content el-col el-col-20">
    			<transition name="el-zoom-in-center" mode="out-in">
		      <router-view class="view"></router-view>
		    </transition>
    		</div>
    	</div>
   </div>
</template>

<script>
import First from './views/first.vue'
import Search from './components/search.vue'

export default {
  components: {
    First,
    "full-search": Search
  },
  data() {
      return {
        activeIndex: '1'
      };
  },
  methods: {
      handleSelect(key, keyPath) {
        //console.log(key, keyPath);
      },
      handleOpen(key, keyPath){
      	//console.log(key, keyPath);
      },
      handleClose(key, keyPath){
      	//console.log(key, keyPath);
      },
      goTo (route) {//路由跳转
      	this.$router.push(route)
      }
  }
}
</script>

<style>
  html{
  	height: 100%;
  }
  body {
	 font-family: Helvetica, sans-serif;
	 margin: 0px;
	 height: 100%;
  }
  header,.el-menu--dark{
  	background-color: rgb(39, 159, 111);
  }
  .container {
    padding-top: 80px;
  }
  .container, .wrapper {
	 height: 100%;
   }
  .el-row {
	box-sizing: border-box;
  }
  header {
    height: 80px;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: 0 20px;
    z-index: 1;
    box-sizing: border-box;
  }
  article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
	display: block;
  }
  .header-logo{
  	display: inline-block;
    vertical-align: middle;
    border-style: none;
  }
  .menu ,.content {
    height: 100%;
  }
  .wrapper {
    position: relative;
  }
  .header-operations:after, header:after {
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
   }
   .header-operations {
    display: inline-block;
    float: right;
    padding-right: 30px;
    height: 100%;
   }
   .el-menu--horizontal .el-menu-item, .el-menu--horizontal .el-submenu .el-submenu__title{
   	height: 80px;
    line-height: 80px;
   }
   .search-bar,.menu-bar{
   	 float: right;
   	 line-height: 80px;
   }
   .fa-icon{
   	 fill: white !important;
   }
   .menu-bar{
   	 margin-top: 12px;
     margin-right: 20px;
   }
   /**router-link统一样式**/
  /*a{
     color:rgb(72, 106, 97);
     text-decoration: none;
     font-weight:400;
  }
  .el-menu-item.is-active>a{
     color:#279f6f;
  }*/
   
</style>
